<template>
	<view class="container">
    <CustomNavBar title="我的钱包" />


    <view class="balance-details">
			<view class="balance-link" @click="goToDetail">
				<text>余额变动明细</text>
				<text class="arrow">></text>
			</view>
            <view class="balance-div">
                <view class="balance-amount">
				    <text class="currency">¥</text>
				    <text class="amount">{{ balance }}</text>
			    </view>
			    <view class="balance-label">当前余额</view>
            </view>
			<view class="action-buttons">
				<button class="action-btn recharge-btn" @click="recharge">立即充值</button>
				<button class="action-btn withdraw-btn" @click="withdraw">立即提现</button>
			</view>
		</view>

		<view class="faq-section">
			<view class="faq-header">
				<view class="faq-line"></view>
				<text class="faq-title">常见问题</text>
				<view class="faq-line"></view>
			</view>

			<view class="faq-item">
				<view class="faq-question">充值后多久到账？</view>
				<view class="faq-answer">通常情况下，充值会立即到账。如果遇到网络延迟，可能会有几分钟的延迟。</view>
			</view>

			<view class="faq-item">
				<view class="faq-question">充值有手续费吗？</view>
				<view class="faq-answer">本平台充值不收取任何手续费。</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref , onMounted } from 'vue'
import { HomeApi } from '@/api/index.js'
import CustomNavBar from '@/components/CustomNavBar.vue'
import NumberUtils from '@/utils/numberUtils.js'

const balance = ref(0.00);

const goBack = () => {
	uni.navigateBack();
};

const getMyInfo = async () => {
  try {
    const userInfo = await HomeApi.getMyInfo()
    balance.value = NumberUtils.formatBalance(userInfo.balance)
  } catch (error) {
    console.error('获取用户信息失败:', error)
    // 保持默认值
  }
}

// 生命周期
onMounted(() => {
  getMyInfo()
})


const goToDetail = () => {
	uni.navigateTo({ url: '/pages/balance/detail' });
};

const recharge = () => {
	uni.navigateTo({ url: '/pages/balance/amount' });
};

const withdraw = () => {
	uni.navigateTo({ url: `/pages/balance/withdraw?balance=${balance.value}` });
};
</script>

<style scoped>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #fff;
}

.back-btn {
	font-size: 32rpx;
	color: #333;
}

.header-right {
	display: flex;
	align-items: center;
}

.more-btn, .scan-btn {
	font-size: 36rpx;
	margin-left: 30rpx;
	color: #333;
}

.balance-details {
	background: linear-gradient(to top, #EAF8F7, #FFFFFF);
	padding: 40rpx 30rpx 60rpx;
	height: 35vh;
	display: flex;
	flex-direction: column;
	justify-content: center; /* 修改为居中对齐 */
	align-items: center;
}

.balance-link {
	justify-content: flex-end;
	align-items: center;
	font-size: 26rpx;
	margin-bottom: 30rpx;
	color: #1BCCB4;
	align-self: flex-end;
	/* position: absolute; 将余额明细链接设为绝对定位 */
	top: 40rpx;
	right: 30rpx;
}
.balance-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
}

.arrow {
	margin-left: 10rpx;
}

.balance-amount {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-bottom: 10rpx;
}

.currency {
	font-size: 40rpx;
	margin-right: 10rpx;
	color: #000;
}

.amount {
    font-weight: 500;
	font-size: 80rpx;
	/* font-weight: bold; */
	color: #000;
}

.balance-label {
	font-size: 28rpx;
	text-align: center;
	color: #999;
	margin-bottom: 40rpx;
}

.action-buttons {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	align-items: center;
	width: 100%;
	margin-top: auto;
	/* margin-bottom: 20rpx; */
}

.action-btn {
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 45rpx;
	font-size: 32rpx;
	text-align: center;
	width: 90%;
}

.recharge-btn {
	background-color: #1BCCB4;
	color: #fff;
	border: none;
}

.withdraw-btn {
	background-color: #fff;
	color: #000;
	border: 1rpx solid #ddd;
}

.faq-section {
	padding: 30rpx;
	margin-top: 20rpx;
}

.faq-header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30rpx;
}

.faq-line {
	height: 1rpx;
	background-color: #ddd;
	flex: 1;
}

.faq-title {
	font-size: 28rpx;
	color: #999;
	margin: 0 20rpx;
}

.faq-item {
	margin-bottom: 30rpx;
}

.faq-question {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 10rpx;
	font-weight: bold;
}

.faq-answer {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
}
uni-button:after {
	border: none;
}
</style>